<!DOCTYPE html>
<html lang="zh_CN" class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>存储管理</title>
    <header th:replace="header::html"></header>
</head>
<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">存储</a>
        <a>
          <cite>存储列表</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>

<div class="x-body">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body ">
                        <table class="layui-hide" id="table" lay-filter="member"></table>
                    </div>
                    <div class="layui-card-body ">
                        <script type="text/html" id="barDemo">
                            <a class="layui-btn layui-btn-xs" lay-event="down"
                               permission="sys:server:down"><i class="layui-icon">&#xe67d;</i>下载</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
                               permission="sys:server:del"><i class="layui-icon">&#xe640;</i>删除</a>
                        </script>
                    </div>
                    <div class="layui-card-body ">
                        <script type="text/html" id="toolbarDemo">
                            <div class="layui-btn-container">
                                <button class="layui-btn layui-btn-danger" permission="sys:server:del"
                                        lay-event="getCheckData"><i
                                        class="layui-icon">&#xe640;</i>批量删除
                                </button>
                            </div>
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    layui.use(['table', 'layer', 'form'], function () {
        $ = layui.jquery;
        var table = layui.table,
            layer = layui.layer;
        var tableIns = table.render({
            elem: '#table'
            , url: '/fileUpload/list' //数据接口
            , toolbar: '#toolbarDemo'
            , response: {
                dataName: 'datas' //规定数据列表的字段名称，默认：data
            }
            , id: 'tableData'
            , cols: [
                [
                    {type: 'numbers', title: '序号', width: 80, align: 'center'},
                    {field: 'key', title: '目录/文件名'},
                    {field: 'size', title: '大小'},
                    {
                        field: 'storageClass', title: '存储类型', templet: function (d) {
                            if (d.storageClass == 'Standard') {
                                return "标准存储";
                            } else if (d.storageClass == 'Archive') {
                                return "归档存储";
                            }
                            return "低频存储";
                        }
                    },
                    {field: 'lastModified', title: '更新时间'},
                    {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 180}
                ]
            ]
            , done: function () {
                checkPermission();
            }
        });

        table.on('toolbar(member)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    if (checkStatus.isAll) {
                        checkDeleteDate(data, "真的全部删除么?");
                        break;
                    }
                    checkDeleteDate(data, "真的要删除么?");
                    break;
            };
        });

        //验证并处理
        function checkDeleteDate(data, msg) {
            if (data.length > 0) {
                var keys = [];
                $.each(data, function (i, item) {
                    keys.push(item.key);
                });
                //执行删除
                deleteFile(JSON.stringify(keys), msg);
            } else {
                layer.msg("请选择需要处理的数据", {icon: 2});
            }
        }

        //删除方法
        function deleteFile(keys, msg) {
            layer.confirm(msg, function (index) {
                $.ajax({
                    url: "/fileUpload/delete",
                    type: "POST",
                    data: {fileName: keys},
                    dataType: 'json',
                    success: function (result) {
                        if (result.code == 200) {
                            layer.alert(result.msg, {icon: 6}, function (index1) {
                                layer.close(index1);
                                tableIns.reload();
                            });
                        } else {
                            layer.alert(result.msg, {icon: 2});
                        }
                    },
                });
            });
        }

        //监听工具条
        table.on('tool(member)', function (obj) {
            var data = obj.data;
            var keys = [];
            keys.push(data.key);
            if (obj.event === 'del') {
                deleteFile(JSON.stringify(keys), "真的要删除么?");
            } else if (obj.event === 'down') {
                window.location.href = "/fileUpload/download?fileName=" + data.key;
            }
        });
        checkPermission();
    });
</script>
